<meta charset="utf-8">
<style>
    div{
        width:100px;
        height:100px;
        background: pink;
        text-align: center;
        line-height:100px;
        float:left;
        margin:10px;
        font-size:24px;
        color:yellow;
        transition:all .6s;
        border-radius:50%;
     }
     div:hover{
        background:red;
        color:pink;
        font-size:30px;
        border-radius:0px;
     } 
</style>
<script>
   var jian=["京","津","沪","渝","冀","豫","云","辽","黑","湘","皖","鲁","新",
                   "苏","浙","赣","鄂","桂","甘","晋","蒙","陕","吉","闽","贵","粤",
                   "青","藏","川","宁","琼","港","澳","台"];
   for(i=0;i<jian.length;i++){
         document.write("<div>"+jian[i]+"</div>");
   }
</script>
